import 'package:flutter/material.dart';

//Stack 绝对定位布局
main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primaryColor: Colors.teal, cardColor: Colors.orange),
      debugShowCheckedModeBanner: false,
      home: HYHomePage(),
    );
  }
}

class HYHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('基础Widge'),
      ),
      body: HYHomeContent(),
      backgroundColor: Colors.white,
      floatingActionButton: FloatingActionButton(
          child: Icon(
            Icons.add,
//            color: Colors.orange,
          ),
          backgroundColor: Colors.teal,
          onPressed: () {
            print('FloatingActionButton click');
          }),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
  }
}

class HYHomeContent extends StatefulWidget {
  @override
  _HYHomeContentState createState() => _HYHomeContentState();
}

class _HYHomeContentState extends State<HYHomeContent> {
  @override
  Widget build(BuildContext context) {
    return StackDemo2();
  }
}

class StackDemo2 extends StatefulWidget {
  const StackDemo2({
    Key key,
  }) : super(key: key);

  @override
  _StackDemo2State createState() => _StackDemo2State();
}

class _StackDemo2State extends State<StackDemo2> {
  bool _isFavor = false;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Image.asset(
          'assets/images/tupian.jpeg',
        ),
        Positioned(
          bottom: 0,
          left: 0,
          right: 0,
          child: Container(
//            width: double.infinity,
            color: Color.fromARGB(100, 0, 0, 0),
            padding: EdgeInsets.symmetric(horizontal: 8),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  'hello world',
                  style: TextStyle(fontSize: 20, color: Colors.white),
                ),
//                GestureDetector(
//                  child: Icon(
//                    Icons.favorite,
//                    color: Colors.white,
//                  ),
//                ),
                IconButton(
                    icon: Icon(
                      Icons.favorite,
                      color: _isFavor ? Colors.red : Colors.white,
                    ),
                    onPressed: () {
                      print('点击了收藏');
                      setState(() {
                        _isFavor = !_isFavor;
                      });
                    })
              ],
            ),
          ),
        )
      ],
    );
  }
}

/**
 * Stack 默认的大小是包裹内容的
 * - alignment: 从什么位置开始排布所有的子Widget
 * - fit: expand（很少用）将子元素拉伸到尽可能大
 * - overflow: 超出部分如何处理
 *
 * Positioned
 */
class StackDemo1 extends StatelessWidget {
  const StackDemo1({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: AlignmentDirectional.bottomStart,
//        fit: StackFit.expand,
//    overflow: Overflow.visible,
      children: [
        Image.asset(
          'assets/images/tupian.jpeg',
          width: 300,
          fit: BoxFit.cover,
        ),
        Positioned(
          left: 23,
          bottom: -50,
          child: Container(
            width: 150,
            height: 150,
            color: Colors.teal,
          ),
        ),
        Positioned(
            right: 10,
            bottom: 20,
            child: Text(
              'hello flutter',
              style: TextStyle(fontSize: 20, color: Colors.green),
            )),
      ],
    );
  }
}

class ColumnDemo extends StatelessWidget {
  const ColumnDemo({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      textBaseline: TextBaseline.alphabetic,
      verticalDirection: VerticalDirection.down,
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          width: 80,
          height: 60,
          color: Colors.teal,
          child: Text(
            'Flutter',
            style: TextStyle(fontSize: 20),
          ),
        ),
        Container(
          width: 120,
          height: 100,
          color: Colors.green,
          child: Text(
            'Flutter',
            style: TextStyle(fontSize: 30),
          ),
        ),
        Container(
          width: 90,
          height: 80,
          color: Colors.blue,
          child: Text(
            'Flutter',
            style: TextStyle(fontSize: 40),
          ),
        ),
        Container(
          width: 50,
          height: 120,
          color: Colors.orange,
          child: Text(
            'Flutter',
            style: TextStyle(fontSize: 20),
          ),
        ),
      ],
    );
  }
}

class ButtonRowDemo extends StatelessWidget {
  const ButtonRowDemo({
    Key key,
  }) : super(key: key);

  //Row特点: 水平方向尽可能占据比较大的空间(水平方向也是希望包裹内容)
  //        垂直方向包裹内容
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
        child: Row(
          mainAxisSize: MainAxisSize.min, //(水平方向也是希望包裹内容
          children: [Icon(Icons.pets), Text('data')],
        ),
        onPressed: null);
  }
}

class RowDemo1 extends StatelessWidget {
  const RowDemo1({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    //Row/Column: 继承Flex
    //Flex: CSS Flex布局 直接使用的较少
    //Flex(direction: Axis.horizontal) == Row
    //Flex(direction: Axis.vertical) == Column
    //MainAxisAlignment (css Flex布局一样)
    //CrossAxisAlignment:
    //  -start 交叉轴的起始位置对齐
    //  -end 交叉轴的结束位置对齐
    //  -center 中心点对齐（默认值）
    //  -baseline 基线对齐(必须有文本的时候才有效果)
    //  -stretch 先Row占据交叉轴尽可能大的空间，将所有的子Widget交叉轴的高度，拉伸到最大
    return Container(
      height: 300,
      child: Row(
//      mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.end,
        textBaseline: TextBaseline.alphabetic,
        children: [
          Container(
            width: 80,
            height: 60,
            color: Colors.teal,
            child: Text(
              'Flutter',
              style: TextStyle(fontSize: 20),
            ),
          ),
          Container(
            width: 120,
            height: 100,
            color: Colors.green,
            child: Text(
              'Flutter',
              style: TextStyle(fontSize: 30),
            ),
          ),
          Container(
            width: 90,
            height: 80,
            color: Colors.blue,
            child: Text(
              'Flutter',
              style: TextStyle(fontSize: 40),
            ),
          ),
          Container(
            width: 50,
            height: 120,
            color: Colors.orange,
            child: Text(
              'Flutter',
              style: TextStyle(fontSize: 20),
            ),
          ),
        ],
      ),
    );
  }
}

//3.Expanded
class RowDemo2 extends StatelessWidget {
  const RowDemo2({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    //Row/Column: 继承Flex
    //Flex: CSS Flex布局 直接使用的较少
    return Container(
      height: 300,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        textBaseline: TextBaseline.alphabetic,
        children: [
          /**
           * Flexible中的属性:
           * - flex
           * Expanded(使用更多) -> Flexible(fit: FlexFit.tight)
           * 空间分配问题
           */
          Expanded(
            flex: 1,
            child: Container(
//              width: 150,
              height: 60,
              color: Colors.teal,
            ),
          ),
          Expanded(
            flex: 2,
            child: Container(
//              width: 200,
              height: 100,
              color: Colors.green,
            ),
          ),
          Container(
            width: 90,
            height: 80,
            color: Colors.blue,
          ),
          Container(
            width: 50,
            height: 120,
            color: Colors.orange,
          ),
        ],
      ),
    );
  }
}
